<template>
  <div class="mouse-coordinate" :style="coordinateStyle">
    <span>X: {{ Math.round(x) }}, Y: {{ Math.round(y) }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  x: {
    type: Number,
    required: true
  },
  y: {
    type: Number,
    required: true
  },
  mouseX: {
    type: Number,
    required: true
  },
  mouseY: {
    type: Number,
    required: true
  }
});

const coordinateStyle = computed(() => ({
  position: 'fixed',
  left: `${props.mouseX + 20}px`,
  top: `${props.mouseY + 20}px`,
  background: 'rgba(45, 55, 72, 0.9)',
  color: 'white',
  padding: '4px 8px',
  borderRadius: '4px',
  fontSize: '12px',
  zIndex: 1000,
  pointerEvents: 'none'
}));
</script>